<?php
/**
 * 服务条款与隐私政策组件
 * 支持自定义页面内容、样式和交互效果，保持与其他组件格式一致
 */
$configKey = isset($configKey) ? $configKey : 'terms';

// 页面文本配置
$texts = [
    'menu_title' => '目录',
];

// 默认配置
$defaultConfig = [
    'section_id' => $configKey . '-privacy',
    'section_pretitle' => '法律信息',
    'section_title' => '服务条款与隐私政策',
    'section_subtitle' => '了解我们的服务条款和隐私政策，保护您的权益',
    'texts' => $texts,
    'card_style' => 'modern', // modern, classic, minimal
    'accent_color' => 'blue-600', // 强调色，用于突出显示元素
    
    // 交互配置
    'interaction' => [
        'scroll_animation' => true, // 滚动动画开关
        'animation_duration' => 0.5, // 动画持续时间(秒)
        'show_toc' => false, // 是否显示目录
        'toc_position' => 'sticky' // fixed 或 sticky
    ],
    
    // 核心内容，不可删除，支持通过array_merge自定义
    'content' => [
        [
            'heading' => '1. 接受条款',
            'content' => '使用我们的服务即表示您同意本服务条款的全部内容。如果您不同意本条款，请不要使用我们的服务。我们保留随时修改本条款的权利，修改后的条款将在发布后立即生效。建议您定期查看本页面以了解最新条款。'
        ],
        [
            'heading' => '2. 服务内容',
            'content' => '我们提供的服务包括但不限于网站功能、内容访问和用户反馈系统。我们保留随时变更、暂停或终止部分或全部服务的权利，无需提前通知用户。我们努力保证服务的稳定性和可用性，但不对服务的不间断运行做任何承诺。'
        ],
        [
            'heading' => '3. 用户责任',
            'content' => '您承诺在使用我们的服务时，将遵守所有适用的法律法规，不传播任何违法、有害、侮辱性、诽谤性或侵犯他人权利的内容。您对自己在服务中发布的所有内容承担全部责任。未经授权，您不得尝试访问我们系统的任何部分或修改服务内容。'
        ],
        [
            'heading' => '4. 知识产权',
            'content' => '本网站上的所有内容，包括但不限于文本、图像、商标、 logos、音频和视频，均受知识产权法律保护，归我们或我们的许可方所有。未经书面许可，您不得复制、分发、修改或使用任何内容。用户提交的反馈和建议可能会被我们用于服务改进，视为授予我们永久的、非独占的使用权。'
        ],
        [
            'heading' => '5. 免责声明',
            'content' => '我们提供的服务按"现状"提供，不做任何形式的保证，包括但不限于适销性、特定用途适用性的默示保证。我们不对因使用或无法使用我们的服务而导致的任何直接或间接损失承担责任。在法律允许的最大范围内，我们的总责任不超过您为使用服务支付的费用（如适用）。'
        ],
        [
            'heading' => '6. 终止',
            'content' => '我们有权在发现您违反本条款时，立即终止您对服务的访问权限，无需提前通知。本条款的终止不影响任何在终止前产生的权利或义务。部分条款在服务终止后仍将继续有效。'
        ],
        [
            'heading' => '7. 适用法律',
            'content' => '本服务条款受中华人民共和国法律管辖，不考虑其法律冲突原则。因本条款引起的任何争议，双方应首先通过友好协商解决；协商不成的，应提交服务提供方所在地有管辖权的法院诉讼解决。'
        ]
    ]
];

// 获取页面传入的自定义配置
$customConfig = $pageConfig['components']['terms'] ?? [];

// 合并配置
$data = array_merge($defaultConfig, $customConfig);

// 处理卡片样式
$cardBaseClasses = "p-8 rounded-xl transition-all duration-300";
$cardStyles = [
    'modern' => $cardBaseClasses . " bg-white shadow-md hover:shadow-lg",
    'classic' => $cardBaseClasses . " bg-white border border-gray-200",
    'minimal' => $cardBaseClasses . " bg-transparent"
];
$cardClass = $cardStyles[$data['card_style']] ?? $cardStyles['modern'];

// 处理强调色类
$accentClass = "text-{$data['accent_color']}";
?>

<!-- 服务条款与隐私政策页面 -->
<section id="<?php echo htmlspecialchars($data['section_id']); ?>" class="py-16">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 区域标题 -->
        <div class="text-center max-w-3xl mx-auto mb-16">
                <span class="inline-block text-sm font-semibold <?php echo $accentClass; ?> uppercase tracking-wider mb-2">
                    <?php echo htmlspecialchars($data['section_pretitle']); ?>
                </span>
            
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                <?php echo htmlspecialchars($data['section_title']); ?>
            </h2>
            
            <p class="text-lg text-gray-600">
                <?php echo htmlspecialchars($data['section_subtitle']); ?>
            </p>
        </div>

        <div class="max-w-5xl mx-auto">
            <!-- 目录（根据配置显示） -->
            <?php if ($data['interaction']['show_toc']): ?>
                <div class="mb-10 <?php echo $data['interaction']['toc_position'] === 'sticky' ? 'sticky top-4' : ''; ?> max-w-xs">
                    <div class="p-4 bg-white rounded-lg shadow-sm border border-gray-100">
                        <h3 class="font-semibold text-gray-900 mb-3"><?php echo $data['texts']['menu_title'];?></h3>
                        <ul class="space-y-2 text-sm">
                            <?php foreach ($data['content'] as $index => $section): ?>
                                <li>
                                    <a href="#term-<?php echo $index; ?>" class="text-gray-600 hover:<?php echo $accentClass; ?> transition-colors">
                                        <?php echo htmlspecialchars($section['heading']); ?>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                </div>
            <?php endif; ?>

            <!-- 条款内容 -->
            <div class="<?php echo $cardClass; ?>">
                <div class="space-y-8 text-gray-700">
                    <?php foreach ($data['content'] as $index => $section): ?>
                        <div 
                            id="term-<?php echo $index; ?>"
                            class="term-section" 
                            data-term-section
                            <?php if ($data['interaction']['scroll_animation']): ?>
                                style="opacity: 0; transform: translateY(20px); transition: opacity <?php echo $data['interaction']['animation_duration']; ?>s ease, transform <?php echo $data['interaction']['animation_duration']; ?>s ease;"
                            <?php endif; ?>
                        >
                            <h4 class="text-xl font-semibold mb-3 text-gray-900">
                                <?php echo htmlspecialchars($section['heading']); ?>
                            </h4>
                            <p class="leading-relaxed">
                                <?php echo htmlspecialchars($section['content']); ?>
                            </p>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 交互脚本 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 从配置获取参数
    const termsConfig = {
        scrollAnimation: <?php echo $data['interaction']['scroll_animation'] ? 'true' : 'false'; ?>,
        animationDuration: <?php echo $data['interaction']['animation_duration']; ?>
    };

    // 滚动动画
    if (termsConfig.scrollAnimation) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.1 });

        document.querySelectorAll('[data-term-section]').forEach(section => {
            observer.observe(section);
        });
    }

    // 平滑滚动（针对目录链接）
    document.querySelectorAll('a[href^="#term-"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 20,
                    behavior: 'smooth'
                });
            }
        });
    });
});
</script>
    